

function Magnifier(index = 0){
    this.samll_wrapper_ele = document.querySelector(".big-img");
    this.focus_ele = document.querySelector(".focus");
    this.big_wrapper_ele = document.querySelector(".big-wrapper");
    this.big_img_ele = this.big_wrapper_ele.querySelector("img");
}
Magnifier.prototype.bindEvent = function(){

    var magnifier_instance = this;
    this.samll_wrapper_ele.onmouseover = function(){
          magnifier_instance.toggle("show");
    }
    this.samll_wrapper_ele.onmouseout = function(){
          magnifier_instance.toggle("hide");
    }

    this.samll_wrapper_ele.onmousemove = function( evt ){
          var e = evt || event;
          magnifier_instance.move( e.offsetX , e.offsetY );
    }
}
Magnifier.prototype.toggle = function( type ){
    switch( type ){
          case "show" : 
                this.focus_ele.style.display = "block";
                this.big_wrapper_ele.style.display = "block";
                break;
          case "hide" :
                this.focus_ele.style.display = "none";
                this.big_wrapper_ele.style.display = "none";
                break;
    }
}
Magnifier.prototype.move = function( x , y ){
    var _left = x - 150;
    var _top  = y - 170;
    _left = _left < 0 ? 0 : _left;
    _top  = _top  < 0 ? 0 : _top;
    _left = _left > 150 ? 150 : _left;
    _top  = _top > 1700 ? 1700 : _top;
    this.focus_ele.style.left = _left + "px";
    this.focus_ele.style.top  =  _top + "px";
    var _left_prop = _left / 150;
    var _top_prop = _top / 170;
    this.big_img_ele.style.left = -250 * _left_prop + "px";
    this.big_img_ele.style.top  = - 250 * _top_prop  + "px";
}
new Magnifier().bindEvent();